<template>
  <div class="app-container">
    <el-card>
      <h3 slot="header">修改商品</h3>
      <el-form :model="form" label-width="120px">
        <el-form-item label="商品名称：" prop="name">
          <el-input placeholder="请输入商品名称" v-model="form.name"/>
        </el-form-item>
        <el-form-item label="商品分类：" prop="cat">
          <el-cascader size="medium" v-model="form.cat" :options="cats"/>
        </el-form-item>
        <el-form-item label="商品数量：" prop="stock">
          <el-input-number v-model="form.stock" :min="1" :max="1000" label="商品数量"/>
        </el-form-item>
        <el-form-item label="商品价格：" prop="originalPrice">
          <el-input placeholder="请输入价格" v-model="form.originalPrice" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="实际价格：" prop="price">
          <el-input placeholder="请输入实际价格" v-model="form.price" type="number">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="所在城市：" prop="price">
          <el-input placeholder="请输入城市名称" v-model="form.detailTitle">
          </el-input>
        </el-form-item>
        <el-form-item label="新旧程度：" prop="qualityLevel">
          <el-select v-model="form.qualityLevel" placeholder="请选择新旧程度">
            <el-option label="全新" value="全新"/>
            <el-option label="五成新" value="五成新"/>
            <el-option label="六成新" value="六成新"/>
            <el-option label="七成新" value="七成新"/>
            <el-option label="八成新" value="八成新"/>
            <el-option label="九成新" value="九成新"/>
          </el-select>
        </el-form-item>
        <el-form-item label="商品介绍：" prop="description">
          <el-input placeholder="请输入商品介绍" v-model="form.description" type="textarea" rows="5"/>
        </el-form-item>
        <el-form-item label>
          <div class="btn-box">
            <el-button type="primary" @click="onSubmit">修改完成</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
    import {updateProduct} from '@/api/product';
    import {fetchListWithChildren} from '@/api/productCate'

    export default {
        name: 'ProductsUpdate',
        props: {
            modify: {
                Object,
                default: () => {
                }
            }
        },
        unData: {
            fileList: []
        },
        data() {
            return {
                update_flag: 0,
                cats: [],
                bt_diable: false,
                // uploadUrl: `${window.location.protocol}//${window.location.host}/protal/pic/file/upload`,
                uploadUrl: `http://127.0.0.1:8080/protal/pic/file/upload`,
                form: {
                    id:null,
                    name: '', // 商品名称
                    cat: [], // 分类
                    stock: 1, // 数量
                    originalPrice: '', // 估价
                    price: '', // 实际价格
                    detailTitle: '',
                    qualityLevel: '九成新',
                    description: ''
                }
            };
        },
        // 页面尚未渲染时执行
        created() {
            this.getProductCateList();
            this.getUrlParams();
        },
        methods: {
            getUrlParams() {
                // 取到路由带过来的参数
                this.form = this.$route.query.params;
            },
            async onSubmit() {
                if(this.form.cat == undefined){
                    this.$notify({
                        title: '通知',
                        message: '请选择商品分类',
                        type: 'warning',
                        duration: 2000 // 是否自动关闭页面
                    });
                }
                this.listLoading = true;
                const files = this.$options.unData.fileList.map(item => {
                    return {
                        id: item.response.data.files[0].id,
                        pic: item.response.data.files[0].pic
                    };
                });
                let data = {
                    productParam: {
                        name: this.form.name,
                        stock: this.form.stock,
                        originalPrice: parseInt(this.form.originalPrice),
                        price: parseInt(this.form.price),
                        detailTitle: this.form.detailTitle,
                        description: this.form.description,
                        productCategoryId: this.form.cat[1],
                        productCategoryName: 'test',
                        qualityLevel: this.form.qualityLevel,
                        memberId : '999'
                    },
                    uploadResult: {
                        files: files
                    }
                };
                for (const cat_ins of this.cats) {
                    for (const sub_ins of cat_ins.children) {
                        if (sub_ins.value === data.productParam.productCategoryId) {
                            data.productParam.productCategoryName = sub_ins.label;
                        }
                    }
                }
                if (this.update_flag === 1) {
                    data.productParam.id = this.$route.params.id;
                }
                await updateProduct(this.form.id,this.form);
                this.$router.push({path: '/pms/product'});
            },

            onSuccess(response, file, fileList) {
                this.$options.unData.fileList = fileList;
                console.log(fileList);
            },
            onError(response, file) {
                console.log(response);
            },
            async onFetchCats() {
                const res = await doCateList();
                let str = JSON.stringify(res.data);
                str = str
                    .replace(/name/g, 'label')
                    .replace(/items/g, 'children')
                    .replace(/id/g, 'value');
                this.cats = JSON.parse(str);
            },
            getProductCateList() {
                fetchListWithChildren().then(response => {
                    let list = response.data;
                    this.cats = [];
                    for (let i = 0; i < list.length; i++) {
                        let children = [];
                        if (list[i].children != null && list[i].children.length > 0) {
                            for (let j = 0; j < list[i].children.length; j++) {
                                children.push({label: list[i].children[j].name, value: list[i].children[j].id});
                            }
                        }
                        this.cats.push({label: list[i].name, value: list[i].id, children: children});
                    }
                });
            },
        },
        mounted() {
            console.log('---------------------------');
        }

    };
</script>
<style lang="scss" type="text/scss" scoped>
  .el-card {
    width: 100%;
  }

  .el-input,
  .el-cascader,
  .el-select,
  .el-textarea {
    width: 80%;
  }

  .btn-box {
    text-align: center;
    width: 80%;

    .el-button {
      margin: 0 15px;
    }
  }
</style>
